<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta name="author" content="林镭特" />
    <title></title>
    <!-- <link href="../bootstrap/css/bootstrap.css" rel="stylesheet"> -->
    <style>
      ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      .box {
        width: 230px;
        background-color: #eee;
        margin: 200px auto;
        padding: 10px;
      }

      .date .date-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }

      .date-list .item {
        box-sizing: border-box;
        color: white;
        text-align: center;
        width: 50px;
        height: 50px;
        background-color: #333;
        margin-bottom: 10px;
        margin-right: 10px;
      }

      .date-list .item:hover {
        background-color: #fff;
        border: 1px solid #000;
        color: #ff7fa1;
      }
      .date-list .item:nth-child(4n) {
        margin-right: 0;
      }
      .info {
        font-size: 14px;
        display: none;
      }
      .info .title {
        font-weight: bold;
      }
      .active {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="date">
        <ul class="date-list">
          <li class="item">
            <div>1</div>
            <span>JUN</span>
          </li>
          <li class="item">
            <div>2</div>
            <span>FEB</span>
          </li>
          <li class="item">
            <div>3</div>
            <span>MAR</span>
          </li>
          <li class="item">
            <div>4</div>
            <span>APR</span>
          </li>
          <li class="item">
            <div>5</div>
            <span>MAY</span>
          </li>
          <li class="item">
            <div>6</div>
            <span>JAN</span>
          </li>
          <li class="item">
            <div>7</div>
            <span>JUL</span>
          </li>
          <li class="item">
            <div>8</div>
            <span>AGU</span>
          </li>
          <li class="item">
            <div>9</div>
            <span>SEP</span>
          </li>
          <li class="item">
            <div>10</div>
            <span>OCT</span>
          </li>
          <li class="item">
            <div>11</div>
            <span>NOV</span>
          </li>
          <li class="item">
            <div>12</div>
            <span>DEC</span>
          </li>
        </ul>
      </div>
      <div class="info active">
        <div class="title">1月节日</div>
        <div class="desc">元旦：1月1日至3日放假三天。</div>
      </div>
      <div class="info">
        <div class="title">2月节日</div>
        <div class="desc">春节：2月2日至8日放假7天。</div>
      </div>
      <div class="info">
        <div class="title">3月节日</div>
        <div class="desc">妇女节：3月8日妇女节，与我无关。</div>
      </div>
      <div class="info">
        <div class="title">4月节日</div>
        <div class="desc">清明节：4月3日至5日放假3天</div>
      </div>
      <div class="info">
        <div class="title">5月节日</div>
        <div class="desc">劳动节：4月30日至5月2日放假3天。</div>
      </div>
      <div class="info">
        <div class="title">6月节日</div>
        <div class="desc">端午节：6月4日至6日放假3天。</div>
      </div>
      <div class="info">
        <div class="title">7月节日</div>
        <div class="desc">小暑：7月7日小暑。不放假。</div>
      </div>
      <div class="info">
        <div class="title">8月节日</div>
        <div class="desc">七夕节：8月6日七夕节。不放假。</div>
      </div>
      <div class="info">
        <div class="title">9月节日</div>
        <div class="desc">中秋节：9月10日至12日放假3天。</div>
      </div>
      <div class="info">
        <div class="title">10月节日</div>
        <div class="desc">国庆节：10月1日至7日放假7天。</div>
      </div>
      <div class="info">
        <div class="title">11月节日</div>
        <div class="desc">立冬：11月8日立冬。不放假。</div>
      </div>
      <div class="info">
        <div class="title">12月节日</div>
        <div class="desc">艾滋病日:12月1日'废除奴隶制国际日:12月2日</div>
      </div>
    </div>
    <script>
      var lis = document.querySelectorAll(".date-list li");
      var info = document.querySelectorAll(".info");
      var index = 0;
      var lastindex = index;

      for (var i = 0; i < lis.length; i++) {
        lis[i].index = i;
        // console.log(block[i]);
        lis[i].onmouseenter = function() {
          index = this.index;
          show();
        };
      }
      function show() {
        info[lastindex].classList.remove("active");
        info[index].classList.add("active");
        lastindex = index;
      }
    </script>
    <!-- <script src="../bootstrap/js/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script> -->
  </body>
</html>
